<template>
  <!-- 统计汇总 -->
  <a-spin :spinning="spinning" class="mb12">
    <a-alert type="info" show-icon>
      <template slot="message">
        {{ title || $route.meta.title }}
        <!-- 遍历汇总集合 -->
        <span v-for="(item, index) in countList" :key="index"
          >{{ item.title }}
          <a v-if="item.value=='selectLength'"><b>{{selectLength || 0 }}</b></a>
          <a v-else-if="item.value=='newTotal'"><b>{{newTotal || 0 }}</b></a>
          <a v-else
            >
            <b v-if="item.key && item.key == 'select'">{{ item.value }}</b>
            <b v-else>{{ countInfo[item.value] || 0 }}</b></a
          >{{ !item.needUnit ? '' : item.unit || '个' }}{{ index != countList.length - 1 ? '，' : '' }}</span
        >
      </template>
    </a-alert>
  </a-spin>
</template>

<script>
export default {
  name: 'AuditSummary',
  props: {
    // 标题
    title: {
      type: String,
      default: () => ''
    },
    countList: {
      type: Array,
      default: () => [
        {
          title: '总数：',
          value: 'total'
        },
        {
          title: '待提交审核：',
          value: 'draftNum'
        },
        {
          title: '审核中：',
          value: 'submittedNum'
        },
        {
          title: '审核不通过：',
          value: 'rejectedNum'
        },
        {
          title: '审核通过：',
          value: 'pastNum'
        }
      ]
    },
    // api
    api: {
      type: Object,
      default: () => null
    },
    // 请求参数
    form: {
      type: Object,
      default: () => ({})
    },
    // 加载表格计数器
    loadCount: {
      type: [Number, String],
      default: () => 0
    },
    apiName: {
      type: String,
      default: () => 'count'
    },
    // 是否初始化
    init:{
      type: Boolean,
      default: ()=> true
    },
    selectLength:{
      type: Number,
      default: () => 0
    },
    newTotal:{
      type: Number,
      default: () => 0
    },
  },
  watch: {
    // 加载表格计数器
    loadCount() {
      this.$nextTick(this.getCount)
    }
  },
  data() {
    return {
      spinning: false, // 加载loading
      countInfo: {} // 汇总对象
    }
  },
  created() {
    // 获取统计信息
    this.init && this.getCount()
  },
  methods: {
    /**
     * 获取统计
     */
    getCount() {
      if(!this.api){
        return
      }
      this.spinning = true
      this.api[this.apiName](this.form)
        .then((res) => {
          this.spinning = false
          if (res.code === 200) {
            this.$emit('beforeCreate',res.data)
            this.countInfo = res.data
          }
        })
        .catch(() => {
          this.spinning = false
        })
    }
  }
}
</script>
